<template>
  <div>
    <mytop :title="title" />
    <div class="warp">
      <div class="item">
        <van-swipe-cell v-for="(item,index) in cart.items" :key="item.id">
          <div class="flexs">
            <van-checkbox @click="setChange" v-model="item.checked"></van-checkbox>
            <van-card
              :num="item.num"
              :price="item.minPrice"
              :title="item.name"
              :desc="item.characteristic"
              class="goods-card"
              :thumb="item.pic"
            >
              <template #footer>
                <van-stepper @change="setNum" v-model="item.num" />
              </template>
            </van-card>
          </div>
          <template #right>
            <van-button
              @click="deledItem(index)"
              square
              text="删除"
              type="danger"
              class="delete-button"
            />
          </template>
        </van-swipe-cell>
      </div>
      <van-submit-bar :price="cart.total*100" button-text="提交订单" @submit="onSubmit">
        <van-checkbox @click="setAllchange" v-model="cart.allChecked">全选</van-checkbox>
        <!-- <template #tip>
          你的收货地址不支持同城送,
          <span @click="onClickEditAddress">修改地址</span>
        </template>-->
      </van-submit-bar>
    </div>
    <mytabbar />
  </div>
</template>

<script>
import mytabbar from 'components/My-Tabbar'
// import cart from 'store/cart'
import mytop from 'components/My-Top'
import { Dialog, Toast } from 'vant'
import { mapMutations, mapState } from 'vuex'
import { isLogin } from 'utils/login'
export default {
  // name: 'cart',
  data () {
    return {
      title: '购物车',
      value: 1,
      checked: true
    }
  },
  created () {
    this.get_total()
  },
  methods: {
    decideAddress () {
      if (!this.address.length) { // 如果为空就是false->不执行 再取反就为真 即可执行 直接返回一个空对象
        return {}
      }
      let defaultAddress = {}
      const contactIsDefault = this.address.find(address => address.isDefault)

      if (contactIsDefault) {
        defaultAddress = contactIsDefault
      } else {
        defaultAddress = this.address[0]
      }
      return defaultAddress
    },
    deledItem (index) {
      console.log(index)
      Dialog.confirm({
        title: '删除',
        message: '确认删除?'
      })
        .then(() => {
          this.deled_Item(index)
          this.get_total()
        })
        .catch(() => {})
    },
    setAllchange () {
      console.log(this.cart.allChecked)
      this.set_allchange(this.cart.allChecked)
      this.set_num(this.cart)
      this.get_total()
    },
    setChange () {
      this.set_num(this.cart)
      this.get_total()
      const allChecked = this.cart.items.every((item) => item.checked)
      this.set_change(allChecked)
    },
    onSubmit () {
      if (isLogin()) {
        // Toast('登陆了 ')
        const currentOrder = {
          id: Date.now(),
          code: Date.now(),
          items: this.cart.items.filter((item) => item.checked),
          total: this.cart.total,
          status: 0,
          contact: this.decideAddress()
          // {
          //   // name: '里斯',
          //   // tel: 17705697822
          // }
        }
        this.set_order(currentOrder)
        // 生成订单
        this.$router.push({
          path: '/order'
          // query: {
          //   from: '/cart'
          // }
        })
      } else {
        Toast('未登录 ')
        this.$router.push({
          path: '/login',
          query: {
            from: '/cart'
          }
        })
      }
    },
    setNum () {
      this.set_num(this.cart)
      this.get_total()
    },
    ...mapMutations('cart', [
      'get_total',
      'set_num',
      'set_change',
      'set_allchange',
      'deled_Item'
    ]),
    ...mapMutations('order', ['set_order'])
  },
  mounted () {
    console.log(this.cart)
  },
  computed: {
    ...mapState({
      // 注意如果state中的数据是对象 最好拷贝一下 深克隆才可以克隆多层
      cart: (state) => JSON.parse(JSON.stringify(state.cart.cart)),
      //  变成对象变成新对象(字符串)
      address: state => state.address.address
    })
  },
  components: {
    mytabbar,
    mytop
  }
}
</script>

<style lang="scss" scoped>
.warp {
  margin-top: 46px;
  margin-bottom: 50px;
}
.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  height: 100%;
}
.flexs {
  display: flex;
  align-content: center;
}
/deep/ .goods-card {
  flex: 1;
}
/deep/ .van-checkbox {
  margin-left: 3px;
  // background-color: #fafafa;
}
// /deep/ .goods-card[data-v-ee0b0d46] {
//   // background-color: #fafafa;
// }
</style>
